<template>

  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100vh">



      <img src="C:\Users\10616\IdeaProjects\sbb\src\assets\blue.png" class="picture">
      <div class="dowebok" ref="dowebok" :class="{'right-panel-active': isSignUpActive}">



        <!-- 注册和登录表单将使用v-if来控制显示 -->
        <div class="form-container sign-up" v-if="isSignUpActive">
          <form @submit.prevent="register">
            <h1>注册</h1>
            <input type="text" v-model="username" placeholder="请输入用户名" />
            <input type="password" v-model="password" placeholder="请输入密码" />
            <input type="password" v-model="second_pwd" placeholder="请再次输入密码" />
            <input type="text" v-model="lrealname" placeholder="请输入真实姓名" />
            <input type="text" v-model="lplace" placeholder="住址" />
            <input type="date" v-model="lbirth" placeholder="出生日期" />
            <input type="text" v-model="lphone" placeholder="手机号码" />

            <button type="submit">注册</button>
          </form>
        </div>

        <div class="form-container sign-in" v-else>
          <form @submit.prevent="login">
            <h1>登录</h1>
            <input type="text" v-model="loginUsername" placeholder="用户名" />
            <input type="password" v-model="loginPassword" placeholder="密码" />
            <button type="submit">登录</button>
          </form>
        </div>

        <!-- 蒙版和面板将使用Vue的transition组件来实现动画效果 -->
        <div class="overlay-container">
          <div class="overlay">
            <div class="overlay-panel mask-left" @click="toggleForm">
              <h1>已有帐号？</h1>
              <p>请使用您的帐号进行登录</p>
              <button class="ghost">登录</button>
            </div>
            <div class="overlay-panel mask-right" @click="toggleForm">
              <h1>没有帐号？</h1>
              <p>立即注册加入我们，和我们一起薅羊毛吧</p>
              <button class="ghost">注册</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>



<script >
import { ref, onMounted } from 'vue';
import axios from "axios";
import {useRouter} from 'vue-router'
import BIRDS from "vanta/src/vanta.birds";
import * as THREE from 'three';



export default {
  name: 'AuthForm',

  setup() {
    // 使用 ref 创建响应式引用
    const isSignUpActive = ref(false);
    const dowebokRef = ref(null);
    const  router = useRouter();


    // 确保组件挂载后再进行DOM操作
    onMounted(() => {
      if (dowebokRef.value) {
        // 可以安全地进行DOM操作
      }
    });

    // 注册和登录的方法
    const username = ref("");
    const password = ref("");
    const second_pwd = ref("");
    const address = ref("");
    const birth = ref("");
    const phone = ref("");
    const lbirth = ref("");
    const lplace = ref("");
    const lrealname = ref("");
    const lphone = ref("");
    const verify = ref("");


    const register = () => {

      // 这里添加注册的逻辑
      if (!username.value) {
        alert("用户名不能为空！");
        return;
      }
      if (!password.value) {
        alert("密码不能为空！");
        return;
      }
      if (password.value !== second_pwd.value) {
        alert("两次输入的密码不一致！");
        return;
      }
      const user = {
        username: username.value,
        pwd: password.value,
        place: lplace.value,
        birth: lbirth.value,
        realname: lrealname.value,
        phone: lphone.value,

      };

      axios.post('http://localhost:8080/users/register', user).then(response => {
        // 注册成功
        console.log(response.data);
        if(response.data === 'success'){
          alert('注册成功');
          isSignUpActive.value = false;
          // 清除表单数据
          username.value = "";
          password.value = "";
          second_pwd.value = "";
          address.value = "";
          birth.value = "";
          phone.value = "";
          lbirth.value = "";
          lplace.value = "";
          lrealname.value = "";
          lphone.value = "";
          verify.value = "";
        }else {
          alert('用户名已存在');
        }
      })
          .catch(error => {
            // 注册失败
            console.error(error);
            // 显示错误信息
            // alert('注册失败');
          })

    };
    const loginUsername = ref("");
    const loginPassword = ref("");

    const login = () => {
      // 这里添加登录的逻辑

      const user = {
        username: loginUsername.value,
        pwd: loginPassword.value
      };

      console.log(user);

      axios.post('http://localhost:8080/users/login', user).then(response => {
        // 登录成功
        console.log(response.data);
        if (response.data === 'success') {
          alert('登录成功')
          // 跳转到首页或其他页面
          loginUsername.value = "";
          loginPassword.value = "";
          router.replace('/user');
        } else {
          alert('用户名或密码错误')
        }
      })
          .catch(error => {
            // 登录失败
            console.error(error);
            // 显示错误信息
            // alert('登录失败');
          })
    };
    const toggleRightPanelActive = () => {
      // 确保dowebokRef已经指向DOM元素
      if (dowebokRef.value) {
        dowebokRef.value.classList.toggle('right-panel-active');
      }
    };
    const toggleForm = () => {
      isSignUpActive.value = !isSignUpActive.value;
      // 根据isSignUpActive的值来决定是否调用toggleRightPanelActive
      if (isSignUpActive.value) {
        toggleRightPanelActive();
      }
    };
    // 由于我们使用 Composition API，不需要在模板中使用 this.$el
    // 我们可以直接使用 dowebokRef 来操作 DOM

    return {
      isSignUpActive,
      register,
      login,
      toggleForm,
      dowebokRef,
      loginUsername,
      loginPassword,
      username,
      password,
      second_pwd,
      address,
      birth,
      phone,
      lbirth,
      lplace,
      lrealname,
      lphone,
      verify
    };

  },

  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 14381274,
      color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>


<style scoped>
.head {
  position: relative;
  height: 45px;
  background-color: #4d4343;
  /* background-color: #a29d9d; */
  /* background-color: skyblue; */
}

.shouye_head {
  width: 1000px;
  margin: 0 auto;
  height: 45px;
  line-height: 45px;
}

.shouye_head a {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
}

.dowebok {
  margin: 20px auto 0px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
  position: absolute;
  overflow: hidden;
  width: 800px;
  max-width: 100%;
  height: 600px;
  margin-top: 70px;
  margin-left: 650px;
  opacity: 0.9;
  z-index: 900;
}

h1 {
  font-weight: bold;
}

p {
  font-size: 14px;
  line-height: 10px;
  margin: 20px 0 20px;
}

span {
  font-size: 12px;
}

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

.form-container form {
  background: #fff;
  display: flex;
  flex-direction: column;
  /* padding:0 50px; */
  height: 100%;
  justify-content: center;
  align-items: center;
  /* text-align:center; */
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
}

.social-container a:hover {
  background-color: #eee;
}

.form-container input {
  background: #eee;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 300px;
  outline: none;
}

button {
  border-radius: 15px;
  /* border:1px solid #20b2aa; */
  border: 1px solid cornflowerblue;
  /* background:#20b2aa; */
  background: cornflowerblue;

  width: 100px;
  height: 40px;
  line-height: 30px;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 4px;
  transition: transform 80ms ease-in;
  cursor: pointer;
}

button:active {
  transform: scale(.95);
}

button:focus {
  outline: none;
}

button.ghost {
  background: cornflowerblue;
  border-color: #fff;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all .6s ease-in-out;
}

.sign-in {
  left: 0;
  width: 50%;
  z-index: 2;
}

.sign-up {
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform .6s ease-in-out;
  z-index: 100;
}

.overlay {
  background: cornflowerblue;
  /* background:linear-gradient(to right,skyblue,lightseagreen) no-repeat 0 0 / cover; */
  background: linear-gradient(to right, cornflowerblue, cornflowerblue) no-repeat 0 0 / cover;
  color: #fff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateY(0);
  transition: transform .6s ease-in-out;
}

.overlay-panel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50%;
  text-align: center;
  transform: translateY(0);
  transition: transform .6s ease-in-out;
}

.mask-right {
  right: 0;
  transform: translateY(0);
}

.mask-left {
  transform: translateY(-50%);
}

/* Move signin to right 向右移动登录 */
.dowebok.right-panel-active .sign-in {
  transform: translateY(100%);
}

/* Move overlay to left 登录蒙版向左移动叠加层 */
.dowebok.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

/* Bring signup over signin 通过登录进行注册 */
.dowebok.right-panel-active .sign-up {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

/* Move overlay back to right 将叠加层移回右侧 */
.dowebok.right-panel-active .overlay {
  transform: translateX(50%);
}

/* Bring back the text to center 使文本回到中心 */
.dowebok.right-panel-active .mask-left {
  transform: translateY(0);
}

/* Same effect for right 右侧效果相同 */
.dowebok.right-panel-active .mask-right {
  transform: translateY(50%);
}

/* 提示语的颜色设置 */
.error {
  color: #ff0000;
}


* {
  margin: 0;
  padding: 0;
}

.clears {
  clear: both;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

ul, li, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  border: none;
}

.box {
  position: relative;
}


h1 {
  font-size: 66px;
}

p {
  margin-top: 60px;
  font-size: 18px;
}

.picture {
  position: absolute;
  width: 800px;
  height: 750px;
  /* Set other styles for your container */


  opacity: 0.15;
  z-index: 500;
}

.LOGO {
  margin-left: 780px;
  position: absolute;
  z-index: 950;
  opacity: 0.8;
  margin-top: 110px;
}

</style>

